<?php
ob_start();
session_start();
require_once __DIR__ . '/common/check_admin.php'; // 权限验证
require_once __DIR__ . '/common/functions.php'; // 数据库连接
global $pdo;
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风格管理 - 后台</title>
    <link rel="stylesheet" href="css/admin.css">
</head>
<body>
    <header class="admin-header">
        <div class="header-container">
            <div class="admin-logo">
                <a href="index.php" class="logo-text">IT知识库管理</a>
                <a href="../index.php" class="to-frontend">→ 前往前台</a>
            </div>
            <nav class="admin-nav">
                <a href="index.php" class="nav-item">首页</a>
                <a href="article.php" class="nav-item">文章管理</a>
                <a href="version.php" class="nav-item">版本管理</a>
                <a href="style.php" class="nav-item active">风格管理</a> <!-- 新增导航 -->
            </nav>
            <div class="user-menu">
                <span class="user-name"><?php echo $_SESSION['username']; ?></span>
                <button class="logout-btn" onclick="location.href='logout.php'">退出</button>
            </div>
        </div>
    </header>

    <div class="container">
        <h1 class="page-title">前端风格管理</h1>
        <a href="style_add.php" class="btn btn-success">+ 新增风格</a>

        <table class="data-table" style="margin-top:20px;">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>风格名称</th>
                    <th>主色调</th>
                    <th>布局类型</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <?php
                $stmt = $pdo->query("SELECT * FROM style_config ORDER BY is_default DESC");
                $styles = $stmt->fetchAll(PDO::FETCH_ASSOC);
                foreach ($styles as $s) {
                    echo '<tr>';
                    echo '<td>' . $s['id'] . '</td>';
                    echo '<td>' . $s['theme_name'] . '</td>';
                    echo '<td><span style="display:inline-block;width:20px;height:20px;background:' . $s['primary_color'] . ';border-radius:3px;"></span> ' . $s['primary_color'] . '</td>';
                    echo '<td>' . ($s['layout_type'] == 1 ? '紧凑布局' : '宽松布局') . '</td>';
                    echo '<td>' . ($s['is_default'] ? '<span class="current-badge">当前使用</span>' : '未使用') . '</td>';
                    echo '<td>';
                    echo '<div style="display:flex;gap:8px;">';
                    echo '<button class="btn btn-primary" onclick="location.href=\'style_edit.php?id=' . $s['id'] . '\'">编辑</button>';
                    if (!$s['is_default']) {
                        echo '<button class="btn btn-success" onclick="setDefault(' . $s['id'] . ')">设为默认</button>';
                        echo '<button class="btn btn-danger" onclick="deleteStyle(' . $s['id'] . ')">删除</button>';
                    }
                    echo '</div></td></tr>';
                }
                ?>
            </tbody>
        </table>
    </div>

    <script>
        // 设为默认风格
        function setDefault(id) {
            if (confirm('确定将该风格设为默认吗？前端将立即生效')) {
                fetch('api/style_api.php?action=setDefault', {
                    method: 'POST',
                    body: new URLSearchParams({id: id})
                }).then(res => res.json()).then(data => {
                    if (data.status === 'success') location.reload();
                    else alert(data.msg);
                });
            }
        }

        // 删除风格
        function deleteStyle(id) {
            if (confirm('确定删除该风格吗？')) {
                fetch('api/style_api.php?action=delete', {
                    method: 'POST',
                    body: new URLSearchParams({id: id})
                }).then(res => res.json()).then(data => {
                    if (data.status === 'success') location.reload();
                    else alert(data.msg);
                });
            }
        }
    </script>
</body>
</html>
<?php ob_end_flush(); ?>